<template>
  <div class="collect">
    <div class="collect-header">
      <div class="collect-title">
        <i class="el-icon-star-off" style="#f5f5f5;"></i>
        我的收藏
      </div>
    </div>
    <div class="content">
      <div class="goods-list" v-if="collectList.length > 0">
        <MyList :list="collectList" :isDelete="true"></MyList>
      </div>
      <div v-else class="collect-empty">
        <div class="empty">
          <h3>您没有收藏东西！！！</h3>
          <p>快去看看有什么值得收藏的东西吧^_^</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collectList: [],
    };
  },
};
</script>

<style>
.collect {
  background-color: rgba(194, 218, 200, 0.199);
}
.collect .collect-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid rgb(207, 124, 124);
  width: 1635px;
}
.collect .collect-header .collect-title {
  width: 1225px;
  /* margin: 0 auto; */
  height: 64px;
  line-height: 58px;
  font-size: 28px;
  color: rgb(207, 124, 124);
}
.collect .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.collect .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.collect .collect-empty {
  width: 1225px;
  margin: 0 auto;
}
.collect .collect-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  background: no-repeat 124px 0;
  color: #03101b59;
  overflow: hidden;
}
.collect .collect-empty .empty h3 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.collect .collect-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
</style>